<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
  <!-- 面包屑 -->
  <div class="nav">
    <span class="layui-breadcrumb">
      <a href="/dashBoard">仪表盘</a>
      <a href="/itemLists">商品管理</a>
      <a><cite>修改商品</cite></a>
    </span>
  </div>
  <form class="layui-form" action="" style="margin-top: 20px;max-width: 600px">
    <div class="layui-form-item">
      <label class="layui-form-label">商品名</label>
      <div class="layui-input-block">
        <input type="text" 
          value="<%= item.itemName %>"
          name="itemName" required  lay-verify="required" placeholder="请输入商品名" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">商品价格</label>
      <div class="layui-input-block">
        <input type="hidden" name="_id" value="<%= item._id %>">
        <input type="number"
          min="0"
          value="<%= item.itemPrice %>"
          name="itemPrice" required  lay-verify="required" placeholder="请输入商品价格" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item layui-form-text">
      <label class="layui-form-label">商品描述</label>
      <div class="layui-input-block">
        <textarea name="itemDesc" placeholder="请输入描述" class="layui-textarea"><%=item.itemDesc%></textarea>
      </div>
    </div>
    <div class="layui-form-item layui-form-text">
      <label class="layui-form-label">上传商品封面</label>
      <div class="layui-input-block">
        <button type="button" class="layui-btn" id="upload">
          <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
        <img src="<%= item.thumb %>" width="100" alt="">
        <a id="confirm" class="layui-btn layui-btn-warm">确定</a>
      </div>
    </div>
    <div class="layui-form-item layui-form-text">
      <label class="layui-form-label">商品详情</label>
      <div class="layui-input-block">
        <div id="content"><%- item.content %></div>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="addItem">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
    
  </form>
  <!-- /面包屑 -->
  <script src="/static/layui/layui.js"></script>
  <script src="/static/js/axios.js"></script>
  <script src="/static/js/wangEditor.js"></script>
  <script>
    //Demo
    layui.use(['form', 'upload', 'layer'], function(){
      var form = layui.form;
      var upload = layui.upload;
      var layer = layui.layer;
      // 初始化富文本编辑器
      var E = window.wangEditor
      var editor = new E('#content')
      editor.create()

      // 初始化上传图片 控件
       //执行实例
      var thumb = '<%= item.thumb %>';
      var uploadInst = upload.render({
        elem: '#upload' //绑定元素
        ,url: '/upload' //上传接口
        ,field: 'file'
        ,auto: false
        ,bindAction: "#confirm"
        ,done: function(res){
          //上传完毕回调
          console.log(res);
          if(res.code === 200) {
            thumb = res.data.url
          }
        }
        ,error: function(){
          //请求异常回调
        }
      });

      //提交
      form.on('submit(addItem)', function(data){

        const items = {
          ...data.field,
          thumb: thumb,
          content: editor.txt.html()
        };
     
       axios.put('/updateItem', items).then(res => {
          if (res.data.code === 200) {
            layer.msg(res.data.msg, {icon: 1, time: 1500}, function(){
              location.href="/itemLists"
            })
          }
        })
        return false;
      });
    });
    </script>
</body>
</html>